<template>
  <div class="employees-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <el-tab-pane label="登录账户设置">
            <!-- :user-info-list="UserInfoList" 将UserInfoList变量传给子组件 -->
            <!-- @saveUserDetailByIdDATA="saveUserDetailByIdFn"接收一个子组件发来的叫 saveUserDetailByIdDATA 的数据包,并将数据包传入 "saveUserDetailByIdFn" 函数 -->
            <LoginSetting
              :user-info-list="UserInfoList"
              @saveUserDetailByIdDATA="saveUserDetailByIdFn"
            />
          </el-tab-pane>
          <el-tab-pane label="个人详情">
            <!-- :user-info-list="UserInfoList" 将UserInfoList变量传给子组件 -->
            <!-- @saveUserDetailByIdDATA="saveUserDetailByIdFn"接收一个子组件发来的叫 saveUserDetailByIdDATA 的数据包,并将数据包传入 "saveUserDetailByIdFn" 函数 -->
            <UserInfo
              :user-info-list="UserInfoList"
              @saveUserDetailByIdDATA="saveUserDetailByIdFn"
            />
          </el-tab-pane>
          <el-tab-pane label="岗位信息">
            <JobInfo />
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<script>
import LoginSetting from './components/login-setting.vue'
import UserInfo from './components/user-info.vue'
import JobInfo from './components/job-info.vue'
// 引入API
import { getUserDetailByIdAPI, saveUserDetailByIdAPI } from '@/api/employees'
export default {
  name: 'EmployeesDetail',
  components: {
    LoginSetting,
    UserInfo,
    JobInfo
  },
  data() {
    return {
      // 用户信息列表
      UserInfoList: {}
    }
  },
  created() {
    // 用ID获取用户的用户名和密码,将获取到的用户信息传给LoginSetting组件和UserInfo组件
    this.getUserDetailByIdFn()
  },
  methods: {
    // 用ID获取用户的用户名和密码
    // id来自浏览器地址栏
    async getUserDetailByIdFn() {
      const res = await getUserDetailByIdAPI(this.$route.query.id)
      // console.log(res)
      if (!res.success) return this.$message.error(res.message)
      // 将获取到的用户信息传给LoginSetting组件(父传子)
      this.UserInfoList = res.data
    },

    // 保存用户更改的信息--发送API请求--给与成功提示--刷新网页数据
    // data由子组件传过来
    async saveUserDetailByIdFn(data) {
      const res = await saveUserDetailByIdAPI(data)
      // console.log(res)
      // 给予成功提示
      if (res.success) {
        this.$message.success(res.message)
        // 刷新网页数据
        this.getUserDetailByIdFn()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
